<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blogdetail.css">
</head>
<body>
      <!--这是一个导航栏-->
      <div class="nav">
        <img src="image/logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!--这个标签仅仅用于占位，把我们的a标签挤到右面去-->
        <div class="spacer"></div>
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>

     <!--页面主体部分-->
     <div class="container">

        <!--左侧信息-->
        <div class="container-left">
            <div class="card">
                <img src="image/BLOG-头像.png" alt="">
                <h2>苏西西</h2>
                <a href="#">github</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
    
    
        <!--右侧信息-->
        <div class="container-right">
            <h3 class="title">我的第一篇博客</h3>
            <div class="date">2023-12-11</div>
            <div class="content">
                <p>好好学习天天向上Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur, alias repellendus ex repudiandae eius deserunt animi distinctio aliquid ab cupiditate, quis soluta adipisci voluptatum nihil dignissimos. Sunt ab totam odit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam aut culpa ducimus esse. Voluptate quo sequi nam vitae illum ducimus neque, necessitatibus repudiandae doloribus? Ipsam debitis quasi molestias delectus atque!
                </p>
                <p>好好学习天天向上Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur, alias repellendus ex repudiandae eius deserunt animi distinctio aliquid ab cupiditate, quis soluta adipisci voluptatum nihil dignissimos. Sunt ab totam odit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam aut culpa ducimus esse. Voluptate quo sequi nam vitae illum ducimus neque, necessitatibus repudiandae doloribus? Ipsam debitis quasi molestias delectus atque!
                </p>
                <p>好好学习天天向上Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur, alias repellendus ex repudiandae eius deserunt animi distinctio aliquid ab cupiditate, quis soluta adipisci voluptatum nihil dignissimos. Sunt ab totam odit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam aut culpa ducimus esse. Voluptate quo sequi nam vitae illum ducimus neque, necessitatibus repudiandae doloribus? Ipsam debitis quasi molestias delectus atque!
                </p>
                <p>好好学习天天向上Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur, alias repellendus ex repudiandae eius deserunt animi distinctio aliquid ab cupiditate, quis soluta adipisci voluptatum nihil dignissimos. Sunt ab totam odit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam aut culpa ducimus esse. Voluptate quo sequi nam vitae illum ducimus neque, necessitatibus repudiandae doloribus? Ipsam debitis quasi molestias delectus atque!
                </p>
            </div>

        </div>

     </div>
</body>
</html>